<template>
	<view class="scroll-box" :class="type" v-if="pushList[0]" @click="$emit('click')">
		<swiper class="scroll-push" :class="{'one': pushList.length == 1, 'two': pushList.length == 2}" :autoplay="autoPlay" :interval="1500" :duration="500" :display-multiple-items="pushList.length > 2 ? 3 : pushList.length" circular vertical @change="swiperChange">
			<swiper-item v-for="(item, index) in pushList" :key="index">
				<view class="follow-item flex-r ac text-hidden" :id="'follow-'+index" :class="isLastItem(index)">
					<template v-if="type == 'barhome'">
						<text class="color-yellow">{{item.userName}}</text><text class="color-grey text-hidden">{{item.content}}</text>
					</template>
					<template v-else>
						<text class="color-yellow">{{item.userName}}：</text><text class="color-grey text-hidden">{{item.content}}</text>
					</template>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	/**
	 * ScrollPush 滚动推送
	 * @description 球吧话题贴滚动推送浮层
	 * @property {String} type = [barhome|7|8] 数据类型
	 *  @value barhome 球吧首页
	 *  @value 6 话题贴
	 *  @value 7 投票贴
	 * @property {String} [barId] 球吧ID
	 * @property {String} [msgId] 方案ID
	 * @example <ScrollPush type="barhome" :barId="barId"></ScrollPush>
	 */
	export default {
		name:"ScrollPush",
		props: {
			type: {
				type: [String, Number],
				default: ''
			},
			barId: {
				type: [String, Number],
				default: ''
			},
			msgId: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				pushList: [], //滚动数据列表
				active: 0, //当前item索引
				
				autoPlay: false //是否自动滚动
			};
		},
		mounted() {
			console.log('mounted');
			this.getDataList()
		},
		beforeDestroy() {
			console.log('beforeDestroy');
			if(this.timer){
				clearTimeout(this.timer)
				this.timer = null
			}
		},
		methods: {
			/**
			 * @description 查询数据
			 */
			getDataList() {
				if(this.type === 'barhome'){
					this.getFollowList()
				}else{
					this.getCommentList()
				}
			},
			/**
			 * @description 查询球吧关注数据
			 */
			getFollowList() {
				this.$http.get({
					url: '/api/forum/latest/info',
					data: {
						forumId: this.barId
					},
					noLoading: true
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result[0]){
						this.scrollBottom(data.result)
					}else{
						this.autoRefresh()
					}
				}).catch((err)=>{
					console.log(err);
				})
			},
			/**
			 * @description 查询话题评论数据
			 */
			getCommentList() {
				this.$http.get({
					url: '/api/chtyUserComment/list',
					data: {
						msgId: this.msgId,
						type: this.type
					},
					noLoading: true
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result[0]){
						this.scrollBottom(data.result)
					}else{
						this.autoRefresh()
					}
				}).catch((err)=>{
					console.log(err);
				})
			},
			/**
			 * @description 滚动事件回调
			 * @param {object} event 回调数据对象
			 */
			swiperChange(event){
				if(this.pushList.length > 3){
					this.active = event.detail.current
				}
			},
			/**
			 * @description 是否时最后一个
			 * @param {number} index 数据索引
			 */
			isLastItem(index){
				if(this.pushList.length > 3){
					if(this.active <= this.pushList.length - 3){
						if(index == this.active + 2){
							return 'last'
						}
					}else{
						if(index == this.active + 2 - this.pushList.length){
							return 'last'
						}
					}
				}
				return ''
			},
			/**
			 * @description 数据处理
			 * @param {array} dataList 数据列表
			 */
			scrollBottom(dataList) {
				this.pushList = dataList.reverse()
				if(this.pushList.length > 3){
					this.autoPlay = true
				}
				this.autoRefresh()
			},
			/**
			 * @description 定时刷新数据
			 */
			autoRefresh() {
				if(!this.timer){
					this.timer = setTimeout(()=>{
						this.getDataList()
						this.timer = null
					}, 30 * 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-box{
		position: absolute;
		left: 20rpx;
		bottom: calc(117rpx + var(--safe-area-inset-bottom));
		@media screen and (min-width: #{$max-width}){
			//left: calc( (100vw - #{$max-width}) / 2 + 20rpx);
		}
		&.barhome{
			bottom: calc(40rpx + var(--safe-area-inset-bottom));
		}
		z-index: 10;
		/deep/ .scroll-push{
			width: 345rpx;
			height: 164rpx;
			&.one{
				height: 48rpx;
			}
			&.two{
				height: 106rpx;
			}
			.follow-item {
				width: fit-content;
				max-width: 345rpx;
				height: 48rpx;
				margin-bottom: 10rpx;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 24rpx;
				padding: 0 20rpx;
				font-size: 22rpx;
				line-height: 48rpx;
				opacity: 1;
				box-sizing: border-box;
				.color-yellow{
					color: #FFE400;
				}
				.color-grey{
					margin-left: 10rpx;
					color: #E6E6E6;
				}
				&.last{
					background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
				}
				&.last:last-child{
					margin-bottom: 0;
				}
			}
		}
		.scroll-push::-webkit-scrollbar {
			display: none;
		}
	}
</style>